<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport"
			content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
		<title>附近充电桩</title>
		<link rel="stylesheet" href="css/global.css" />
		<link rel="stylesheet" href="css/public.css" />
		<link rel="stylesheet" href="css/footer.css" />
		<link rel="stylesheet" href="css/children.css" />
		<link href="css/picker.css" rel="stylesheet" />
	</head>
	<body>
		<div class="content-main-box-small">
			<div class="content bg-white">
				<div class="search-box">
					<div class="search-left" id="searchBox">
						<img src="images/icon/icon-search.png" class="icon-search" />
						<input class="input-txt" id="inputSearch" placeholder="请输入搜索的充电桩"/>
					</div>
					<div class="search-btn">搜索</div>
				</div>
				<div class="nav-box nav-box-big">
					<div class="nav-tab-box">
						<div class="nav-tab active">
							<span class="name">新能源车</span>
							<span class="line"></span>
						</div>
						<div class="nav-tab">
							<span class="name">电动自行车</span>
							<span class="line"></span>
						</div>
					</div>
				</div>


			</div>

		</div>

		<!-- 列表 -->
		<div class="content-list-box small-list-fixed">
			<div class="buy-record-list">
				<div class="buy-record-title">
					<div class="title">郑州东方电热科技有限公司郑州东方电热科技有限公司</div>
					<span class="juli">距你400m</span>
				</div>
				<div class="buy-record-cont">
					河南省郑州市中原区红楠路
				</div>
				<div class="buy-record-bottom">
					<div class="left-name">
						<p class="btn green">闲</p>
						<div class="total-box">
							<span class="green">09</span>
							<span class="black">/10</span>
						</div>
					</div>
					<div class="right-name">
						<img src="images/icon/icon-daohang.png" class="icon-daohang" />
						<span>导航</span>
					</div>
				</div>
			</div>
			<div class="buy-record-list">
				<div class="buy-record-title">
					<div class="title">郑州东方电热科技有限公司郑州东方电热科技有限公司</div>
					<span class="juli">距你400m</span>
				</div>
				<div class="buy-record-cont">
					河南省郑州市中原区红楠路
				</div>
				<div class="buy-record-bottom">
					<div class="left-name">
						<p class="btn green">闲</p>
						<div class="total-box">
							<span class="green">09</span>
							<span class="black">/10</span>
						</div>
					</div>
					<div class="right-name">
						<img src="images/icon/icon-daohang.png" class="icon-daohang" />
						<span>导航</span>
					</div>
				</div>
			</div>
			<div class="buy-record-list">
				<div class="buy-record-title">
					<div class="title">郑州东方电热科技有限公司郑州东方电热科技有限公司</div>
					<span class="juli">距你400m</span>
				</div>
				<div class="buy-record-cont">
					河南省郑州市中原区红楠路
				</div>
				<div class="buy-record-bottom">
					<div class="left-name">
						<p class="btn green">闲</p>
						<div class="total-box">
							<span class="green">09</span>
							<span class="black">/10</span>
						</div>
					</div>
					<div class="right-name">
						<img src="images/icon/icon-daohang.png" class="icon-daohang" />
						<span>导航</span>
					</div>
				</div>
			</div>
			<div class="buy-record-list">
				<div class="buy-record-title">
					<div class="title">郑州东方电热科技有限公司郑州东方电热科技有限公司</div>
					<span class="juli">距你400m</span>
				</div>
				<div class="buy-record-cont">
					河南省郑州市中原区红楠路
				</div>
				<div class="buy-record-bottom">
					<div class="left-name">
						<p class="btn green">闲</p>
						<div class="total-box">
							<span class="green">09</span>
							<span class="black">/10</span>
						</div>
					</div>
					<div class="right-name">
						<img src="images/icon/icon-daohang.png" class="icon-daohang" />
						<span>导航</span>
					</div>
				</div>
			</div>
			<div class="buy-record-list">
				<div class="buy-record-title">
					<div class="title">郑州东方电热科技有限公司郑州东方电热科技有限公司</div>
					<span class="juli">距你400m</span>
				</div>
				<div class="buy-record-cont">
					河南省郑州市中原区红楠路
				</div>
				<div class="buy-record-bottom">
					<div class="left-name">
						<p class="btn green">闲</p>
						<div class="total-box">
							<span class="green">09</span>
							<span class="black">/10</span>
						</div>
					</div>
					<div class="right-name">
						<img src="images/icon/icon-daohang.png" class="icon-daohang" />
						<span>导航</span>
					</div>
				</div>
			</div>
		</div>
		<script type="text/javascript" src="js/zepto.min.js"></script>
		<script type="text/javascript" src="js/rem.js"></script>
		<script type="text/javascript" src="js/init.js"></script>
		<script type="text/javascript">
			$(function() {
				// 切换导航
				$('.nav-tab-box .nav-tab').click(function() {
					$(this).addClass('active').siblings().removeClass('active')
				})
				$('#inputSearch').focus(function(){
					$('#searchBox').addClass('active')
				})
				$('#inputSearch').blur(function(){
					$('#searchBox').removeClass('active')
				})
			})
		</script>
	</body>
</html>